<template>
  <div class="personData-nickName">
    <van-nav-bar title="昵称" left-arrow   @click-left="onClickLeft">
      <template #right >
        <span id="s" @click="preserve">保存</span>
      </template>
    </van-nav-bar>
    <br>
    <van-cell-group>
      <van-field v-model="val.nickName" label="昵称" placeholder="请输入昵称" size="large"/>
    </van-cell-group>
  </div>
</template>

<script>
import {updataInfo} from '@/api/user'
export default {
  data(){
    return {
      val:{
        nickName:''
      }
      
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push('/privateData')
    },
    preserve(){
      // 保存修改的昵称
      this.$toast.loading('保存中...');
      updataInfo(this.val).then(res=>{
        if(res.code==0){
          setTimeout(() => {
          this.$toast.clear();
          this.$store.dispatch('getNickName',this.val.nickName);
          this.$router.push('/privateData')
        },300);
        }
      })
      
    }
  }
}
</script>

<style lang="less">
#s{
  width: 60px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  // font-family: Microsoft Yahei;
}
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
</style>